<template>
  <div class="task-detail">
            <el-card class="exampaper-item-box" style="overflow-y: auto;">
                <h2 class="title">{{paper.name}}</h2>
                <div class="content">
                  {{paper.content}}
                </div>
                <div class="img-wrap">
                  <img class="img-item" v-for="(img,imgIdx) in paper.pics" :key="imgIdx" :src="img.picPath" alt="">
                </div>
                <div class="answer">
                  <el-input
                    type="textarea"
                    placeholder="请输入内容"
                    rows="8"
                    v-model="form.answer"
                    style="height: auto;">
                  </el-input>
                </div>
                <el-row class="do-align-center" style="text-align: center;margin-top: 15px;">
                    <el-button @click="close">取消</el-button>
                    <el-button type="primary" @click="submitForm">提交</el-button>
                </el-row>
            </el-card>
  </div>
</template>

<script>
  import Pagination from '@/components/Pagination'
  import { paperSimulation,submitSimulation  } from '@/api/TeachingCenter/simulationManage'
  import { parseTime, getURLParam } from '@/utils/index'
  export default {
    components: { Pagination },
    data() {
      return {
        queryParam: {
          pageNumber: 1,
          pageSize: 10,
          filters: [
            {
              value: '',
              paramName: 'create_time',
              paramOperator: 'EQ'
            },
            {
              value: '',
              paramName: 'status',
              paramOperator: 'EQ'
            }
          ]
        },
        checkList:[],
        titleItems: [
            {name: '题目1',questionItems:[]}
        ],// 题目
        form: {
            id: 0,
            "answer": "",
            "customerScore": 70,
            // "deleted": 0,
            "doRight": 0,
            // "limitEndTime": "",
            // "limitStartTime": "",
            "simulationId": 0,
            // "simulationName": ""
        },
        paper: {},
        total: 0
      }
    },
    mounted() {
      let id = getURLParam('id', window.location.href)
      this.form.id = id
      this._getTaskDetail()
    },
    methods: {
      async _getTaskDetail() {
        const { data:{records} } = await paperSimulation({
          "filters": [
            {
              "paramName": "id",
              "paramOperator": "EQ",
              "value": this.form.id
            }
          ],
          "pageNumber": 1,
          "pageSize": 50,
          "params": {},
          "sorts": [
            {
            }
          ]
        })
        if(records.length) {
          if(process.env.NODE_ENV == 'development') {// 生产环境
            records[0].pics.forEach(img => {
              img.picPath = 'http://www.gzaitech.com:8085/' + img.picPath
            });
          }
          this.paper = records[0]
          this.form.simulationId = this.paper.questionTextContentId
        }
      },
        handleAnswer() {},
        close(){
          this.$router.push({name: 'analogDiagnosis'})
        },
        submitForm(){
          submitSimulation(this.form).then(res=>{
            if(res.code == 1) {
              this.$message.success({
                message: "提交成功",
                type: "success",
                duration: 1500,
                onClose: () => {
                  this.$router.push({name: 'analogDiagnosis'})
                }
              })
            }
          })
        },
      parseTime
    },

  }
</script>
<style lang="scss" scoped>
  .task-detail {
    max-height: 100vh;
    overflow-y: auto;
    // padding: 0 20px;
  }
  .questionItems-tit {
    padding-bottom: 20px;
    border-bottom: 1px solid #000;
  }
  .exampaper-item-box {
    height: calc(100vh - 80px);
    width: 80%;
    margin: 30px auto;
  }
  .title {
    text-align: center;
  }
  .content {
    border: 1px #ccc solid;
    border-radius: 5px;
    padding: 10px;
    min-height: 80px;
    margin-bottom: 10px;
  }
  .img-wrap {
    margin-bottom: 10px;
    .img-item {
      margin-right: 5px;
      width: 300px;
      height: auto;
    }
  }
</style>
